<template>
  <div>
    <div>
      <div class="todo">
        <p class="title">待还款金额(元)</p>
        <p class="money">￥{{detail.need_repay}}</p>
        <p class="tips">提前还款需要将还款金额一次性还清</p>
      </div>
      <div class="detail">
        <section class="hairlines-bottom">
          <h4>丰期明细</h4>
          <p><span>丰期金额</span><span class="right">￥{{detail.has_repay + detail.need_repay}}</span></p>
          <p><span>消费时间</span><span class="right">{{detail.apply_time}}</span></p>
          <p><span>消费店铺</span><span class="right">{{detail.name}}</span></p>
        </section>
        <section>
          <h4>还款明细</h4>
          <p><span>已还金额</span><span class="right">￥{{detail.has_repay || 0}}</span></p>
          <p><span>还款记录</span><span class="right"><router-link :to="'/mine/repay/record/' + this.$route.params.id">查看</router-link></span></p>
        </section>
      </div>
    </div>
    <footer class="form-footer">
      <input class="footer-fullW-bt" type="button" value="返回" @click="back">
    </footer>
  </div>
</template>
<script>
  // 提前还款详情
  import $ from 'edom'
  
  export default {
    name: 'aheadRepayDetail',
    data () {
      return {
        title: '还款详情',
        detail: {
          need_repay: null,
          apply_time: null,
          name: null,
          has_repay: null
        }
      }
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      getDetail () {
        this.axios.post('/api/loanRepay/prepayment_detail', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token,
          user_loan_id: this.$route.params.id
        }).then((res) => {
          let data = res.data
          if (data.code !== 200) {
            $().Mnews('工程师喂猫去了', 2000)
            return
          }
          this.detail = data.desc
        })
      }
    },
    created () {
      this.setTitle(this.title)
      this.getDetail()
    }
  }
</script>
<style lang="scss" scoped>
  @function rem($px) {
    @return $px / 75 * 1rem;
  }
  .todo{
    margin-bottom: rem(15);
    position: relative;
    background: #fff;
    text-align: center;
    padding: rem(35) 0 rem(40);
    .title{
      margin-bottom: rem(15);
      font-size: rem(30);
      color: #141414;
    }
    .money{
      margin-bottom: rem(15);
      font-size: rem(68);
      color: #ff8131;
    }
    .tips{
      font-size: rem(26);
      color: #999;
      span{
        color: #f81e1e;
      }
    }
    .repayed-img{
      position: absolute;
      top: rem(-30);
      right: rem(-30);
      width: rem(140);
      height: rem(140);
    }
  }
  .repay{
    display: block;
    margin-bottom: rem(15);
    background: #fff;
    position: relative;
    padding: 0 rem(24);
    height: rem(90);
    line-height: rem(90);
    font-size: rem(30);
    color: #333;
    &:before{
      position: absolute;
      top: 0;
      right: rem(24);
      bottom: 0;
      font-size: rem(22);
      color: #666;
    }
  }
  .detail{
    background: #fff;
    section{
      padding: rem(30) rem(24);
    }
    p,h4{
      margin-bottom: rem(15);
      font-size: rem(28);
      color: #999;
    }
    p{
      font-size: rem(26);
    }
    .right{
      float: right;
    }
    a{
      color: #0081e6;
    }
  }
  .form-footer{
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
  }
</style>
